<script setup lang="ts">
import { onMounted, ref } from "vue";
import { stringifyQuery, useRoute, useRouter } from "vue-router";
const queryName = ref("");
onMounted(() => {
  const route = useRoute(); //路由信息
  //   queryName.value = route.query.name as string;
  //query传递参数-路径?key=value&key1=value
  //params传递参数-路径/：参数名称/：参数名称1
  queryName.value = route.params.name as string;
  route.params.index;
});
//自定义hook的特性 必须在最顶层声明才可以使用
const router = useRouter();
const back = () => {
  router.back();
  // router.go(-1) // 返回
};
</script>

<template>
  <div class="search">
    <p>搜索关键字: {{ queryName }}</p>
    <p>搜索结果:</p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
    <button @click="back">返回</button>
  </div>
</template>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
